import { Button, Space, message, Modal } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';

export const enum LimitType {
    /**不需要选中栏目 */
    Never,
    /**必须选择且只选中一项栏目 */
    Only,
    /**必须选择栏目，支持多选 */
    Multiple,
}

export type ButtonItem = [string, Function, Optional?]

interface Optional {
    /**按钮回调限制类型 */
    limit?: LimitType

    /**原按钮配置项传参 */
    config?: any

    /**是否不弹出提示框 */
    isNotConfirm?: boolean

    /**确认信息的自定义标题 */
    title?: string

    /**确认信息的自定义信息 */
    content?: string
}


interface Props {
    /**表格头部按钮配置项 */
    buttons: ButtonItem[]

    /**表格查询表单的内容 */
    queryParams: any

    /**可选表格的被选中项 */
    selectedRows: any[]
}

const TableButton: React.FC<Props> = ({
    buttons,
    queryParams,
    selectedRows
}) => {
    console.debug('TableButton', buttons, selectedRows);

    function handleClick(evt: any, name: string, cb: Function, opt?: Optional) {
        //额外的辅助数据对象
        const extra = {
            evt,
            name,
            opt,
            queryParams,
        }
        const type = (opt && opt.limit) || LimitType.Never
        switch (type) {
            case LimitType.Only:
                if (selectedRows.length !== 1) {
                    message.warning('请选中需要编辑的一栏信息，且只选中一栏');
                } else {
                    cb(selectedRows, extra);
                }
                break;
            case LimitType.Multiple:
                if (selectedRows.length === 0) {
                    message.warning(`请选中需要${name}的信息`);
                } else {
                    if (opt && opt.isNotConfirm) {
                        cb(selectedRows, extra);
                    } else {
                        Modal.confirm({
                            title: opt?.title || name,
                            icon: <ExclamationCircleOutlined />,
                            content: opt?.content || `是否将选中项${name}？`,
                            okText: '确认',
                            cancelText: '取消',
                            onOk: () => cb(selectedRows, extra),
                        });
                    }
                }
                break;
            default:
                cb(selectedRows, extra);
                break;
        }
    }


    return (
        <Space>
            {buttons.map(([name, cb, opt]: ButtonItem) => (
                <Button
                    key={name}
                    onClick={evt => { handleClick(evt, name, cb, opt) }}
                    {...((opt && opt.config) || {})}
                >
                    {name}
                </Button>)
            )}
        </Space>
    )
}


export default TableButton
